<template>
  <div>
    <el-dialog
      title="货道设置"
      :visible="aislevisible"
      @open="getAisleInfo"
      @close="close"
      width="940px"
    >
      <div class="aisle_header">
        <div class="header_txt">货道行数：{{ aisleType.vmRow }}</div>
        <div class="header_txt">货道列数：{{ aisleType.vmCol }}</div>
        <div class="header_txt header_txt1">
          货道容量（个）：{{ aisleType.channelMaxCapacity }}
        </div>
        <el-button type="primary" @click="sortDevice">智能排序</el-button>
      </div>
      <el-scrollbar v-loading="loading">
        <el-row
          :class="{ rightActive: rightActive, leftActive: leftActive }"
          style="display: flex"
        >
          <el-col v-for="item in oneList" :key="item.channelId">
            <div class="item">
              <div class="code">{{ item.channelCode }}</div>
              <div class="sku" v-if="item.sku">
                <img :src="item.sku.skuImage" />
                <div>{{ item.sku.skuName }}</div>
              </div>
              <div class="sku" v-else>
                <img src="@/assets/kong.png" />
                <div>暂无商品</div>
              </div>
              <div>
                <el-button
                  class="add_buttom"
                  type="primary"
                  @click="addSku(item)"
                  >添加</el-button
                >
                <el-button
                  class="delete_buttom"
                  type="danger"
                  @click="deleteType(item)"
                  :disabled="!item.sku"
                  >删除</el-button
                >
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row
          :class="{ rightActive: rightActive, leftActive: leftActive }"
          style="display: flex"
        >
          <el-col v-for="item in twoList" :key="item.channelId">
            <div class="item">
              <div class="code">{{ item.channelCode }}</div>
              <div class="sku" v-if="item.sku">
                <img :src="item.sku.skuImage" />
                <div>{{ item.sku.skuName }}</div>
              </div>
              <div class="sku" v-else>
                <img src="@/assets/kong.png" />
                <div>暂无商品</div>
              </div>
              <div>
                <el-button
                  class="add_buttom"
                  type="primary"
                  @click="addSku(item)"
                  >添加</el-button
                >
                <el-button
                  class="delete_buttom"
                  type="danger"
                  :disabled="!item.sku"
                  >删除</el-button
                >
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row
          :class="{ rightActive: rightActive, leftActive: leftActive }"
          style="display: flex"
        >
          <el-col v-for="item in threeList" :key="item.channelId">
            <div class="item">
              <div class="code">{{ item.channelCode }}</div>
              <div class="sku" v-if="item.sku">
                <img :src="item.sku.skuImage" />
                <div>{{ item.sku.skuName }}</div>
              </div>
              <div class="sku" v-else>
                <img src="@/assets/kong.png" />
                <div>暂无商品</div>
              </div>
              <div>
                <el-button
                  class="add_buttom"
                  type="primary"
                  @click="addSku(item)"
                  >添加</el-button
                >
                <el-button
                  class="delete_buttom"
                  type="danger"
                  :disabled="!item.sku"
                  >删除</el-button
                >
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row
          :class="{ rightActive: rightActive, leftActive: leftActive }"
          style="display: flex"
        >
          <el-col v-for="item in firstList" :key="item.channelId">
            <div class="item">
              <div class="code">{{ item.channelCode }}</div>
              <div class="sku" v-if="item.sku">
                <img :src="item.sku.skuImage" />
                <div>{{ item.sku.skuName }}</div>
              </div>
              <div class="sku" v-else>
                <img src="@/assets/kong.png" />
                <div>暂无商品</div>
              </div>
              <div>
                <el-button
                  class="add_buttom"
                  type="primary"
                  @click="addSku(item)"
                  >添加</el-button
                >
                <el-button
                  class="delete_buttom"
                  type="danger"
                  :disabled="!item.sku"
                  >删除</el-button
                >
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row
          :class="{ rightActive: rightActive, leftActive: leftActive }"
          style="display: flex"
        >
          <el-col v-for="item in fiveList" :key="item.channelId">
            <div class="item">
              <div class="code">{{ item.channelCode }}</div>
              <div class="sku" v-if="item.sku">
                <img :src="item.sku.skuImage" />
                <div>{{ item.sku.skuName }}</div>
              </div>
              <div class="sku" v-else>
                <img src="@/assets/kong.png" />
                <div>暂无商品</div>
              </div>
              <div>
                <el-button
                  class="add_buttom"
                  type="primary"
                  @click="addSku(item)"
                  >添加</el-button
                >
                <el-button
                  class="delete_buttom"
                  type="danger"
                  :disabled="!item.sku"
                  >删除</el-button
                >
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row
          :class="{ rightActive: rightActive, leftActive: leftActive }"
          style="display: flex"
        >
          <el-col v-for="item in sixList" :key="item.channelId">
            <div class="item">
              <div class="code">{{ item.channelCode }}</div>
              <div class="sku" v-if="item.sku">
                <img :src="item.sku.skuImage" />
                <div>{{ item.sku.skuName }}</div>
              </div>
              <div class="sku" v-else>
                <img src="@/assets/kong.png" />
                <div>暂无商品</div>
              </div>
              <div>
                <el-button
                  class="add_buttom"
                  type="primary"
                  @click="addSku(item)"
                  >添加</el-button
                >
                <el-button
                  class="delete_buttom"
                  type="danger"
                  :disabled="!item.sku"
                  >删除</el-button
                >
              </div>
            </div>
          </el-col>
        </el-row>
      </el-scrollbar>
      <i
        class="el-icon-arrow-left"
        :class="{ arrow: leftActive }"
        @click="leftClick"
      ></i>
      <i
        class="el-icon-arrow-right"
        :class="{ arrow: rightActive }"
        @click="rightClick"
      ></i>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <SearchSku
      ref="SearchSku"
      @addSkuList="addSkuList"
      :skuvisible.sync="skuvisible"
    />
  <SortDailog ref="SortDailog" :sortvisible.sync="sortvisible" @suggestList= "suggestList"/>
  </div>
</template>

<script>
import SortDailog from './SortDailog.vue'
import SearchSku from './SearchSku.vue'
import { getVmType, getChannelList, channelConfig } from '@/api/device-manager'
export default {
  name: 'AisleDialog',
  props: {
    AisleList: {
      type: Object,
      required: true
    },
    aislevisible: {
      type: Boolean,
      required: true
    }
  },
  components: { SearchSku, SortDailog },
  data () {
    return {
      rightActive: false, // 判断样式
      leftActive: true,
      skuvisible: false, // 添加
      sortvisible: false, // 排序
      loading: false, // 加载
      aisleType: {}, // 售卖机详情
      ChanneeList: [], // 货道详情
      oneList: [], // 第一条货道
      twoList: [], // 第二条货道
      threeList: [], // 第三条货道
      firstList: [], // 第四条货道
      fiveList: [], // 第五条货道
      sixList: [], // 第六条货道
      channelList: [], // 处理完需要提交的数据
      businessID: '' // 商圈id
    }
  },
  methods: {
    // 处理数据
    async getAisleInfo () {
      this.loading = true
      this.aisleType = await getVmType(this.AisleList.vmType)
      this.ChanneeList = await getChannelList(this.AisleList.innerCode)
      this.businessID = this.AisleList.node.businessType.id
      this.oneList = this.ChanneeList.filter(item =>
        item.channelCode.startsWith('1')
      )
      this.twoList = this.ChanneeList.filter(item =>
        item.channelCode.startsWith('2')
      )
      this.threeList = this.ChanneeList.filter(item =>
        item.channelCode.startsWith('3')
      )
      this.firstList = this.ChanneeList.filter(item =>
        item.channelCode.startsWith('4')
      )
      this.fiveList = this.ChanneeList.filter(item =>
        item.channelCode.startsWith('5')
      )
      this.sixList = this.ChanneeList.filter(item =>
        item.channelCode.startsWith('6')
      )
      this.loading = false
    },
    // 关闭
    close () {
      this.$emit('update:aislevisible', false)
    },
    // 向左移动
    leftClick () {
      this.rightActive = false
      this.leftActive = true
    },
    // 向右移动
    rightClick () {
      this.rightActive = true
      this.leftActive = false
    },
    // 删除商品
    deleteType (item) {
      item.sku = null
    },
    // 添加商品
    addSku (item) {
      this.$refs.SearchSku.ChanneeListInfo = item
      this.skuvisible = true
    },
    // 响应添加的商品
    addSkuList (ChanneeListInfo) {
      const index = this.ChanneeList.findIndex(
        item => item.channelId === ChanneeListInfo.channelId
      )
      this.ChanneeList[index] = ChanneeListInfo
    },
    // 确认
    async onSubmit () {
      this.channelList = this.ChanneeList.map(item => {
        if (!item.sku) {
          return { channelCode: item.channelCode, skuId: '0' }
        } else {
          return { channelCode: item.channelCode, skuId: item.sku.skuId }
        }
      })
      await channelConfig({ channelList: this.channelList, innerCode: this.AisleList.innerCode })
      this.close()
      this.$message({ type: 'success', message: '货道配置成功' })
    },
    // 排序
    sortDevice () {
      this.$refs.SortDailog.businessID = this.businessID
      this.sortvisible = true
    },
    suggestList (businessList) {
      businessList.forEach(item => { this.$set(item, 'skuImage', item.image) })
      this.ChanneeList.forEach((item, index) => { item.sku = businessList[index] })
    }
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog {
    .el-dialog__body {
      padding: 10px 50px 30px;
      .aisle_header {
        padding: 0 20px 0 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        background: #f3f6fb;
        margin-bottom: 20px;
        .header_txt {
          margin-right: 50px;
        }
        .header_txt1 {
          flex: 1;
        }
        .el-button--primary {
          background-color: rgb(95, 132, 255);
          border: 0;
        }
      }
      .el-scrollbar {
        width: 814px;
        height: 384px;
        margin: 0 auto;
        // 滑动滚轮隐藏
        .el-scrollbar__wrap {
          overflow-x: hidden;
        }
        .is-horizontal {
          display: none;
        }
        .rightActive {
          transform: translateX(-830px);
        }
        .leftActive {
          transform: translateX(0px);
        }
        .el-row {
          margin-bottom: 20px;
          transition: 0.4s linear 0.1s;
          .el-col {
            margin-right: 16px;
          }
        }
        .item {
          position: relative;
          width: 150px;
          height: 180px;
          text-align: center;
          box-shadow: 0 2px 4px 0 rgb(0 0 0 / 6%);
          .code {
            position: absolute;
            top: 10px;
            left: 0;
            width: 43px;
            height: 23px;
            line-height: 23px;
            border-radius: 0 10px 10px 0;
            font-size: 12px;
            color: #fff;
            background: #829bed;
          }
          .sku {
            height: 135px;
            background-color: #f6f7fb;
            padding-top: 16px;
            img {
              width: 84px;
              height: 78px;
              border-radius: 4px;
              margin-bottom: 10px;
            }
          }
          .add_buttom,
          .delete_buttom {
            background: transparent;
            padding-right: 0;
            padding-left: 0;
            border: 0;
            margin-top: 4px;
          }
          .add_buttom {
            color: #409eff;
          }
          .delete_buttom {
            color: #f56c6c;
          }
        }
      }
      .arrow {
        color: #ccc;
        cursor: default !important;
      }
      .el-icon-arrow-left {
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-20px);
        font-size: 40px;
        cursor: pointer;
      }
      .el-icon-arrow-right {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-20px);
        font-size: 40px;
        cursor: pointer;
      }
    }
  }
</style>
